<style lang="scss" scoped>
    @import '~@/scss/public.scss';
    .ui-tag{
        display: inline-flex;
        align-items: center;
        height: .9rem;
        padding: 0 3px;
        margin-right: 0.3rem;
        border-radius: 4px;
        font-size: .6rem;
        border-width: 1px;
        border-style: solid;
        $c: $ui-color-primary;
        color: $c;
        border-color: rgba($c, .2);
        background-color: rgba($ui-color-primary, .1);
        &:last-of-type{
            margin-right: 0;
        }
        &[type=warning]{
            $c:$ui-color-yellow;
            color: $c;
            border-color: rgba($c, .2);
            background-color: rgba($c, .1);
        }
        &[type=success]{
            $c:$ui-color-green;
            color: $c;
            border-color: rgba($c, .2);
            background-color: rgba($c, .1);
        }
        &[type=error]{
            $c:$ui-color-red;
            color: $c;
            border-color: rgba($c, .2);
            background-color: rgba($c, .1);
        }
        &[type=info]{
            $c:#909399;
            color: $c;
            border-color: rgba($c, .2);
            background-color: rgba($c, .1);
        }
        animation: init .5s;
        @keyframes init {
            0%{
                opacity: 0;
                transform: scale3d(0,1,1);
            }
            100%{
                opacity: 1;
                transform: scale3d(1,1,1);
            }
        }
    }
</style>
<template>
    <span @click="$emit('click')" class="ui-tag" v-if="$slots.default && $slots.default[0].text!=null"><slot></slot></span>
</template>
<script>
    export default {
        name:'ui-tag'
    }
</script>